<template>
    <div class="kszy-page">
        <el-card class="top">
            <p @click="ClickActiveId(0)" :class=" activeId === 0 ? 'active' : 'ps' ">取件作业</p>
            <p @click="ClickActiveId(1)" :class=" activeId === 1 ? 'active' : 'ps' ">派件作业</p>
            <p @click="ClickActiveId(2)" :class=" activeId === 2 ? 'active' : 'ps' ">已取消</p>
        </el-card>

        <el-card v-show="activeId !== 2" class="center">
            <el-form :inline="true" :model="form" label-width="120px">
                <el-form-item label="运单编号 :">
                    <el-input placeholder="请输入运单编号" v-model="form.waybillID"></el-input>
                </el-form-item>
                <el-form-item label="快递员姓名 :">
                    <el-input placeholder="请输入快递员姓名" v-model="form.courierName"></el-input>
                </el-form-item>
                <el-form-item label="发件人地址 :" >
                    <el-select class="selects" v-model="sheng" placeholder="选择省">
                        <el-option label="河北" value="河北"></el-option>
                        <el-option label="北京" value="北京市"></el-option>
                        <el-option label="上海" value="上海"></el-option>
                    </el-select>
                    <el-select class="selects" v-model="shi" placeholder="选择市">
                        <el-option label="直辖区" value="直辖区"></el-option>
                        <el-option label="莲池区" value="莲池区"></el-option>
                        <el-option label="浦东区" value="浦东区"></el-option>
                    </el-select>
                    <el-select class="selects" v-model="qu" placeholder="选择区">
                        <el-option label="昌平区" value="昌平区"></el-option>
                        <el-option label="别的区" value="别的区"></el-option>
                        <el-option label="其他区" value="其他区"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发件人姓名 :">
                    <el-input placeholder="请输入发件人姓名" v-model="form.addresserName"></el-input>
                </el-form-item>
                <el-form-item label="作业状态 :">
                    <el-select v-model="form.jobStatus" placeholder="请选择">
                        <el-option label="待提货" value="0"></el-option>
                        <el-option label="在途中" value="1"></el-option>
                        <el-option label="已交付" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button class="formSubmit" color="#e15536" type="primary" @click="onSubmit">搜索</el-button>
                    <el-button @click="reSet">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="bottom" v-show="activeId === 0">
            <div>
                <el-button :icon="Plus" color="#e15536" type="primary" class="allocation">分配快递员</el-button>
            </div>
            <div>
                <el-table v-loading="loading" border :data="tableData" style="width: 100%">
                    <el-table-column type="selection" width="50" />
                    <el-table-column prop="a" label="序号" width="50" />
                    <el-table-column prop="fetchID" label="取件作业编号" width="200" />
                    <el-table-column prop="waybillID" label="运单编号" width="200" />
                    <el-table-column prop="courierStatus" label="快递员分配状态" width="200">
                        <template #default="scope">
                            <tag v-if="scope.row.courierStatus">已分配</tag>
                            <tag v-else>未分配</tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="collectTime" label="下单时间" width="200" />
                    <el-table-column prop="jobStatus" label="作业状态" width="200">
                        <template #default="scope">
                            <tag v-if="scope.row.jobStatus === 0">待提货</tag>
                            <tag v-else-if="scope.row.jobStatus === 1">在途中</tag>
                            <tag v-else>已交付</tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="courierName" label="快递员姓名" width="200" />
                    <el-table-column prop="addresserName" label="发件人姓名" width="200" />
                    <el-table-column prop="addresserPhone" label="发件人电话" width="200" />
                    <el-table-column prop="addresserSite" label="发件人地址" width="250" />
                    <el-table-column prop="time" label="计划取件时间" width="200" />
                    <el-table-column prop="completionTime" label="完场时间" width="200" />
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
                :page-sizes="[2, 3, 4, 6]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>

        <el-card class="bottom" v-show="activeId === 1">
            <div>
                <el-button :icon="Plus" color="#e15536" type="primary" class="allocation">分配快递员</el-button>
            </div>
            <div>
                <el-table v-loading="loading" border :data="tableData" style="width: 100%">
                    <el-table-column type="selection" width="50" />
                    <el-table-column prop="a" label="序号" width="50" />
                    <el-table-column prop="fetchID" label="取件作业编号" width="200" />
                    <el-table-column prop="waybillID" label="运单编号" width="200" />
                    <el-table-column prop="courierStatus" label="快递员分配状态" width="200">
                        <template #default="scope">
                            <tag v-if="scope.row.courierStatus">已分配</tag>
                            <tag v-else>未分配</tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="collectTime" label="下单时间" width="200" />
                    <el-table-column prop="jobStatus" label="作业状态" width="200">
                        <template #default="scope">
                            <tag v-if="scope.row.jobStatus === 0">待提货</tag>
                            <tag v-else-if="scope.row.jobStatus === 1">在途中</tag>
                            <tag v-else>已交付</tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="courierName" label="快递员姓名" width="200" />
                    <el-table-column prop="addresserName" label="发件人姓名" width="200" />
                    <el-table-column prop="addresserPhone" label="发件人电话" width="200" />
                    <el-table-column prop="addresserSite" label="发件人地址" width="250" />
                    <el-table-column prop="time" label="计划取件时间" width="200" />
                    <el-table-column prop="completionTime" label="完场时间" width="200" />
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
                :page-sizes="[2, 3, 4, 6]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>

        <el-card class="bottom" v-show="activeId === 2">
            <!-- <div>
                <el-button :icon="Plus" color="#e15536" type="primary" class="allocation">分配快递员</el-button>
            </div> -->
            <div>
                <el-table v-loading="loading" border :data="tableData" style="width: 100%">
                    <el-table-column type="selection" width="50" />
                    <el-table-column prop="a" label="序号" width="50" />
                    <el-table-column prop="fetchID" label="取件作业编号" width="200" />
                    <el-table-column prop="waybillID" label="运单编号" width="200" />
                    <el-table-column prop="courierStatus" label="快递员分配状态" width="200">
                        <template #default="scope">
                            <tag v-if="scope.row.courierStatus">已分配</tag>
                            <tag v-else>未分配</tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="collectTime" label="下单时间" width="200" />
                    <el-table-column prop="jobStatus" label="作业状态" width="200">
                        <template #default="scope">
                            <tag v-if="scope.row.jobStatus === 0">待提货</tag>
                            <tag v-else-if="scope.row.jobStatus === 1">在途中</tag>
                            <tag v-else>已交付</tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="courierName" label="快递员姓名" width="200" />
                    <el-table-column prop="addresserName" label="发件人姓名" width="200" />
                    <el-table-column prop="addresserPhone" label="发件人电话" width="200" />
                    <el-table-column prop="addresserSite" label="发件人地址" width="250" />
                    <el-table-column prop="time" label="计划取件时间" width="200" />
                    <el-table-column prop="completionTime" label="完场时间" width="200" />
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
                :page-sizes="[2, 3, 4, 6]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
            <!-- <div class="pagination">
                <el-pagination v-model:currentPage="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[2, 3, 4, 6]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div> -->
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import axios from 'axios'

const value = ref()
const sheng = ref("")
const shi = ref("")
const qu = ref("")
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(3)
const activeId = ref(0)
const loading = ref(true)
const tableData = ref([])
const form = ref({
    waybillID: "",
    courierName: "",
    addresserSite: "",
    addresserName: "",
    jobStatus: ""
})

const ClickActiveId = (index) => {
    activeId.value = index
}

const reSet = () => {
    form.value.courierName=""
    form.value.addresserSite=""
    form.value.addresserName=""
    form.value.waybillID=""
    form.value.jobStatus=""
    sheng.value = ""
    shi.value = ""
    qu.value = ""
    pageSize.value = 3
    currentPage.value = 1
    getData(pageSize.value,currentPage.value,form.value.courierName,form.value.addresserSite,form.value.addresserName,form.value.waybillID,form.value.jobStatus)
}

const getData = (pagesize,pagenum,couriername,addressersite,addressername,waybillID,jobStatus) => {
    console.log(form.value,222);
    axios.get(`/kdzygl?pagesize=${pagesize}&pagenum=${pagenum}&courierName=${couriername}&addresserSite=${addressersite}&addresserName=${addressername}&waybillID=${waybillID}&jobStatus=${jobStatus}`).then(res=>{
        res.data.data.forEach((item,index) => {
            item.a = index+1
            item.time = filterTime(item.time)
            item.completionTime = filterTime(item.completionTime)
            item.collectTime = filterTime(item.collectTime)
        })
        tableData.value = res.data.data
        total.value = res.data.total
        console.log(res.data,1111);
    })
}

onMounted(() => {
    loading.value = false
    getData(pageSize.value,currentPage.value,form.value.courierName,form.value.addresserSite,form.value.addresserName,form.value.waybillID,form.value.jobStatus)
})

const filterTime = (time) => {
    var date = new Date(time);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    var d = date.getDate();
    d = d < 10 ? "0" + d : d;
    var h = date.getHours();
    h = h < 10 ? "0" + h : h;
    var minute = date.getMinutes();
    minute = minute < 10 ? "0" + minute : minute;
    var s = date.getSeconds();
    s = s < 10 ? "0" + s : s;
    return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
}

const handleSizeChange = (a) => {
    pageSize.value = a
    getData(a,currentPage.value,form.value.courierName,form.value.addresserSite,form.value.addresserName,form.value.waybillID,form.value.jobStatus)
}

const handleCurrentChange = (a) => {
    currentPage.value = a
    getData(pageSize.value,a,form.value.courierName,form.value.addresserSite,form.value.addresserName,form.value.waybillID,form.value.jobStatus)
}

const onSubmit = () => {
    form.value.addresserSite = sheng.value+" "+shi.value+" "+qu.value
    console.log(form.value);
    getData(pageSize.value,currentPage.value,form.value.courierName,form.value.addresserSite,form.value.addresserName,form.value.waybillID,form.value.jobStatus)
}

</script>

<style lang="less" scoped>
.kszy-page {
    // width: 100%;
    // height: 100%;
    margin: 20px;
    box-sizing: border-box;

    .el-card {
        --el-card-padding: 0px;
    }

    .top {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        height: 48px;
        width: 100%;
        display: flex;

        .ps {
            width: 120px;
            height: 48px;
            cursor: pointer;
            margin: 0;
            padding: 0;
            display: inline-block;
            line-height: 48px;
            font-size: 14px;
            text-align: center;
        }

        .active {
            width: 120px;
            height: 48px;
            cursor: pointer;
            margin: 0;
            display: inline-block;
            line-height: 48px;
            font-size: 14px;
            text-align: center;
            background: #ffeeeb;
            color: #e15536;
        }

    }

    .center {
        box-sizing: border-box;
        width: 100%;
        height: 140px;
        margin: 0;
        padding: 0;
        margin-top: 20px;
        padding-top: 22px;

        .el-form-item {
            box-sizing: border-box;

            .el-select {
                // width: 380px;
                height: 30px;
            }

            .selects {
                width: 90px;
                height: 40px;
                margin-left: 20px;
            }

            button {
                width: 90px;
                height: 36px;
            }
        }

        .formSubmit {
            margin-left: 30px;
            margin-right: 20px;
        }


    }

    .bottom {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 20px;
        margin-top: 20px;

        .allocation {
            height: 42px;
        }

        .el-table {
            margin-top: 20px;
            text-align: center;
        }

    }

    .pagination {
        width: 600px;
        margin: 0 auto;
        margin-top: 30px;
    }
}
</style>